<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>傻强物流信息管理系统</title>
    <link rel="stylesheet" href="/assets/js/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/assets/css/global.css" media="all">
    <link rel="stylesheet" href="/assets/js/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/css/table.css"/>
</head>

<body>
<div class="admin-main">
    <form action="" class="layui-form" method="post">
        <div class="layui-inline">
            <label class="layui-form-label">快递公司</label>
            <div class="layui-input-block">
                <select id="expressCompany" name="expressCompany" lay-verify="required" asnycSelect="/expressCompany/options?type=0&search=1" lay-filter="module_select">
                    <option value="">请选择快递公司</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">快递单号</label>
            <div class="layui-input-block">
                <input type="text" id="expressNo" name="expressNo" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <input type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="search" value="获取"/>
            <input type="reset" class="layui-btn layui-btn-primary" value="重置"/>
        </div>
    </form>

    <fieldset class="layui-elem-field">
        <legend>快递查询结果</legend>

        <!-- 快递基本信息 -->
        <div class="layui-field-box layui-form" id="expressBase">
        </div>

        <!-- 物流轨迹信息 -->
        <div class="layui-field-box layui-form">
            <table class="layui-table admin-table">
                <thead>
                    <tr>
                        <th width="*">物流轨迹</th>
                        <th width="*">轨迹说明</th>
                        <th width="*">轨迹时间</th>
                    </tr>
                </thead>
                <tbody id="expressTrack"></tbody>
            </table>
        </div>

    </fieldset>
</div>

<!-- 物流单据信息 -->
<script type="text/html" id="express_data_list_tpl">
    <table class="layui-table admin-table">
        <thead>
        <tr>
            <th width="*">快递公司:</th>
            <th width="*">快递单号:</th>
            <th width="*">物流状态:</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ d.expressCompany || '' }}</td>
                <td>{{ d.expressNo || '' }}</td>
                <td>{{ d.state || '' }}</td>
            </tr>
        </tbody>
    </table>
</script>

<!-- 物流轨迹信息 -->
<script type="text/html" id="express_track_list_tpl">
    {{# layui.each(d.expressDataArray, function(index, item){ }}
    <tr>
        <td>{{ item.acceptStation || '' }}</td>
        <td>{{ item.remark || '' }}</td>
        <td>{{ item.acceptTime || '' }}</td>
    </tr>
    {{# }); }}
</script>
</body>
<script type="text/javascript" src="/assets/js/layui/layui.js"></script>
<script>
    layui.cache.page = 'module';
    layui.config({
        version: "1.0.0",
        base: '/assets/js/'
    });
    layui.use(['layer', 'form', 'laytpl', 'oneplatform'], function () {
        var layer = layui.layer
            , $ = layui.jquery
            , form = layui.form
            , laytpl = layui.laytpl
            , oneplatform = layui.oneplatform;

        form.on('submit(search)', function (data) {
            var loading = layer.load();
            $.ajax({
                dataType: "json",
                type: "POST",
                url: '/expressDetail/getExpressDetail',
                contentType: "application/json",
                data: JSON.stringify(data.field),
                complete: function () {
                    layer.close(loading);
                },
                success: function (data) {
                    if (data.code == 200) {
                        // 快递基本信息
                        var tpl = $('#express_data_list_tpl').html();
                        laytpl(tpl).render(data.data,
                            function (html) {
                                $("#expressBase").html(html);
                            });

                        // 物流轨迹信息
                        tpl = $('#express_track_list_tpl').html();
                        laytpl(tpl).render(data.data,
                            function (html) {
                                $("#expressTrack").html(html);
                            });
                    } else {
                        oneplatform.error(data.msg);
                    }
                },
                error: function (xhr, type) {
                    oneplatform.error("系统错误" + type);
                }
            });
            return false;
        });
    });
</script>
</html>